<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<style>
		*{
	font-family:PingFang-SC-Bold;
}
.body{
	 padding-top: 20px;
	 box-sizing: border-box;
     background: -webkit-linear-gradient(#ffffff, #F0F0F0); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(#ffffff, #F0F0F0); /* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(#ffffff, #F0F0F0); /* Firefox 3.6 - 15 */
	background: linear-gradient(#ffffff, #F0F0F0); /* 标准的语法 */
}
	.hedactive{
		color:rgba(254,105,101,1)!important;
		border-bottom: 2px solid  rgba(254,105,101,1); 
	}
  .heads{
	  position: relative;
	  width: 100%;
	  height: 50px;
	  display: flex;
	  justify-content: space-around;
	  border-bottom: 1px solid rgba(153,153,153,0.6)!important;
	  padding: 5px  20px;
	  box-sizing: border-box;
  }
	.dan{
		padding: 0px  0px;
		line-height: 36px;
		box-sizing: border-box;
		font-size:16px;
        font-weight:bold;
        height:36px ;
        color:rgba(51,51,51,1);
	}
	.mainhead{
		position: relative;
		width: 100%;
		height: 50px;
		white-space: nowrap;
		overflow-y: hidden;
		display: flex;
		margin-top: 10px;
		padding: 10px  0px;
		box-sizing: border-box;
	}
	.danactive{
		color:#FFFFFF!important;
		background: red;
		border-radius: 5px;
	}
	.headdan{
       position: relative;
		height: 25px;
		line-height: 25px;
		padding-left: 10px; 
		padding-right: 10px;
		margin-left: 10px;
		text-align: center;
		font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
	}
	.mui-grid-view{
		position: relative;
		margin-top: 20px;
		background: none;
	}
	.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){
		margin: 0;
	}
	.mui-table-view:before {
		height: 0px;
	}
		.mui-table-view:after {
			height: 0px;
		}
		.hangjia,.hangjias{
			position: relative;
			width: 100%;
			height: 27px;
			padding: 0 5px;
			box-sizing: border-box;
		}
		.hangjia >div{
			position: relative;
			float: left;
			width:50%;
			height: 100%;
			line-height: 50px;
			text-align: left;
			font-size:14px;
            font-weight:bold;
            color:rgba(254,31,31,1);
           line-height:36px;
		   overflow-x: hidden;
		}
		.hangjia >div:nth-child(2){
			text-align: right;
		}
		
		.hangjias >img{
			position: relative;
			float: left;
			width:29px;
			height: 26px;
			border-radius: 50%;
		}
		.hangjias >div:nth-child(2){
			position: relative;
			float: left;
			width: calc(100% - 29px - 10px);
			text-align: left;
			padding-left: 5px;
			height: 100%;
			box-sizing: border-box;
			font-size:12px;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height:24px;
		}
		.left,.right{
			padding: 0 15px;
			box-sizing: border-box;
			    width: 100%;
		}
		.mui-table-view.mui-grid-view{
			
			padding: 0px;
		}
		
		.mui-media{
			background: #FFFFFF!important;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell{
			padding: 0px;
			box-sizing: border-box!important;
		}
		.mui-table-view.mui-grid-view .mui-table-view-cell .+mui-media-body{
			padding: 0  5px!important;
			text-align: left!important;
			box-sizing: border-box!important;
		}
		
		li{
			position: relative;
			float: left;
			width: calc((100% -  20px) /  2);
			margin-top: 10px;
			margin-left: 5px;
			background: #FFFFFF;
		}
  .mui-grid-view>li:nth-child(even){
	 margin-left:10px;
  }
		.mui-media-body{
			width: 100%;
            overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size:13px;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(51,51,51,1);
line-height:18px;
padding: 0  5px;
box-sizing: border-box;
		}
		
		.mui-table-view .mui-media-object{
			max-width: none;
		}
		li>a>img{
			width: 100%;
			height: 134px!important;
		}
		
	
</style>





	<body>


		<div id="body" class="mui-content">
			<div class="heads">
				<div  index="0" class="dan  hedactive">记录影片</div>
				<div  index="1" class="dan">电影周边</div>
			</div>

    <div  id="left" class="left">
			<div id="myleft" class="mainhead">
				<div class="headdan  danactive">相生小品</div>
				<div class="headdan">相生小品</div>
				<div class="headdan">相生小品</div>
				<div class="headdan">相生小品</div>
			</div>

			<ul class="mui-table-view mui-grid-view" id="shipings">
			<!--<li class="">
					<a href="#">
						<img class="mui-media-object" src="image/shou10.png">
						<div class="mui-media-body">幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
						<div class="hangjia">
							<div>￥2300</div>
							<div>526人购买</div>
						</div>
						<div class="hangjias"><img src="image/touxiang.png">
							<div>商家名称</div>
						</div>
					</a></li>
					
					<li class="">
						<a href="#">
							<img class="mui-media-object" src="image/shou10.png">
							<div class="mui-media-body">幸福就是可以一起睡觉</div>
							<div class="hangjia">
								<div>￥2300</div>
								<div>526人购买</div>
							</div>
							<div class="hangjias"><img src="image/touxiang.png">
								<div>商家名称</div>
							</div>
						</a></li>
						
						<li class="">
							<a href="#">
								<img class="mui-media-object" src="image/shou10.png">
								<div class="mui-media-body">幸福就是可以一起睡觉</div>
								<div class="hangjia">
									<div>￥2300</div>
									<div>526人购买</div>
								</div>
								<div class="hangjias"><img src="image/touxiang.png">
									<div>商家名称</div>
								</div>
							</a></li>
							
							<li class="">
								<a href="#">
									<img class="mui-media-object" src="image/shou10.png">
									<div class="mui-media-body">幸福就是可以一起睡觉</div>
									<div class="hangjia">
										<div>￥2300</div>
										<div>526人购买</div>
									</div>
									<div class="hangjias"><img src="image/touxiang.png">
										<div>商家名称</div>
									</div>
								</a></li> -->
			</ul>
      	</div>
		
		    <div  id="right" class="right" style="display: none;" >
				<div id="myrigth" class="mainhead">
					<div class="headdan  danactive">相生小品2</div>
					<div class="headdan">相生小品2</div>
					<div class="headdan">相生小品2</div>
					<div class="headdan">相生小品2</div>
				</div>
		
				<ul class="mui-table-view mui-grid-view" id="shangpings">
					<!-- <li class="">
						<a href="#">
							<img class="mui-media-object" src="image/shou10.png">
							<div class="mui-media-body">幸福就是可以一起睡觉幸福就是可以一起睡觉</div>
							<div class="hangjia">
								<div>￥2300</div>
								<div>526人购买</div>
							</div>
							<div class="hangjias"><img src="image/touxiang.png">
								<div>商家名称</div>
							</div>
						</a></li>
						
						<li class="">
							<a href="#">
								<img class="mui-media-object" src="image/shou10.png">
								<div class="mui-media-body">幸福就是可以一起睡觉</div>
								<div class="hangjia">
									<div>￥2300</div>
									<div>526人购买</div>
								</div>
								<div class="hangjias"><img src="image/touxiang.png">
									<div>商家名称</div>
								</div>
							</a></li>
							
							<li class="">
								<a href="#">
									<img class="mui-media-object" src="image/shou10.png">
									<div class="mui-media-body">幸福就是可以一起睡觉</div>
									<div class="hangjia">
										<div>￥2300</div>
										<div>526人购买</div>
									</div>
									<div class="hangjias"><img src="image/touxiang.png">
										<div>商家名称</div>
									</div>
								</a></li>
								
								<li class="">
									<a href="#">
										<img class="mui-media-object" src="image/shou10.png">
										<div class="mui-media-body">幸福就是可以一起睡觉</div>
										<div class="hangjia">
											<div>￥2300</div>
											<div>526人购买</div>
										</div>
										<div class="hangjias"><img src="image/touxiang.png">
											<div>商家名称</div>
										</div>
									</a></li> -->
				</ul>
		  	</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
		mui.plusReady(function () {
					var url = plus.storage.getItem('url');
					// 
					var leixing = 0;
					var shipinpage = 1;
					var shangpingpage = 1;
					var shipinfenlei = 0;
					var shangpingfenlei = 0;
					// 
					// 
					mui.init({
						pullRefresh : {
							container:'body',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
							up : {
							  height:50,//可选.默认50.触发上拉加载拖动距离
							  auto:false,//可选,默认false.自动上拉加载一次
							  contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
							  contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
							  callback :function(){
								  // mui.alert('haha')
								  // mui.toast('haha')
								  getData(function(){
									  mui('body').pullRefresh().endPullupToRefresh();
								  })
								  
							  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							}
						  }
					})
					// //获取视屏数据
					function getshiping(func){
						if(shipinpage==0){
							mui.toast('已经没有更多数据了!');
							if(func){
								func()
							}
							return;
						}
						plus.nativeUI.showWaiting()
						// var myuser = plus.storage.getItem('user');
						// myuser = JSON.parse(myuser);
						$.post(url+'/juyou/index/getshipinglist',{page:shipinpage,fenlei:shipinfenlei},function(res){
							plus.nativeUI.closeWaiting();
							if(res.code==200){
								if(shipinpage==1){
									$("#shipings").empty()
								}
								var str = '';
								if(res.data.length<10){
									shipinpage = 0;
								}else{
									shipinpage = shipinpage+1;
								}
								$.each(res.data,function(i,v){
									str+='<li class="" data-id="'+v.id+'">'+
					'<a href="#">'+
						'<img class="mui-media-object" src="'+v.covers+'">'+
						'<div class="mui-media-body">'+v.name+'</div>'+
						'<div class="hangjia">'+
							'<div>金币：'+v.coins+'</div>'+
							'<div>'+v.goumai+'人购买</div>'+
						'</div>'+
						'<div class="hangjias"><img src="'+v.user.touxiang+'">'+
							'<div>'+v.user.name+'</div>'+
						'</div>'+
					'</a></li>';
								})
								$("#shipings").append(str);
								if(func){
									func();
								}
							}else{
								mui.toast(res.msg);
							}
						})
					}
					// //获取商品数据
					function getshangping(func){
						if(shangpingpage==0){
							mui.toast('已经没有更多数据了!');
							if(func){
								func()
							}
							return;
						}
						plus.nativeUI.showWaiting()
						
						$.post(url+'/juyou/index/getshangpinglist',{page:shangpingpage,fenlei:shangpingfenlei},function(res){
							plus.nativeUI.closeWaiting();
							if(res.code==200){
								if(shangpingpage==1){
										$("#shangpings").empty();
									}
									var str = '';
									if(res.data.length<10){
										shangpingpage = 0;
									}else{
										shangpingpage = shangpingpage+1;
									}
									$.each(res.data,function(i,v){
										str += '<li class="" data-id="'+v.id+'">'+
								'<a href="#">'+
									'<img class="mui-media-object" src="'+v.tupian+'">'+
									'<div class="mui-media-body">'+v.name+'</div>'+
									'<div class="hangjia">'+
										'<div>金币：'+v.icons+'</div>'+
										'<div>'+v.goumai+'人购买</div>'+
									'</div>'+
									'<div class="hangjias"><img src="'+v.user.touxiang+'">'+
										'<div>'+v.user.name+'</div>'+
									'</div>'+
								'</a></li>';
									})
									$("#shangpings").append(str);
							}else{
								mui.toast(res.msg);
							}
							if(func){
								func();
							}
						})
					}
					function getData(func){
						if(leixing=='all'){
							getshiping(func);
							getshangping(func);
						}else if(leixing==0){
							getshiping(func);
						}else if(leixing==1){
							getshangping(func);
						}
						
					}
					$.post(url+'/juyou/index/getfenleishangping',{},function(res){
						if(res.code==200){
							var title = '';
							var body = '';
							title+='<div  index="0" class="dan  hedactive">'+res.data.shiping.name+'</div>';
							$.each(res.data.shiping.data,function(i,v){
								if(i==0){
									shipinfenlei = v.id;
									body +='<div class="headdan  danactive" data-id="'+v.id+'">'+v.name+'</div>';
								}else{
									body +='<div class="headdan" data-id="'+v.id+'">'+v.name+'</div>';
								}
								
							})
							$("#myleft").empty();
							$("#myleft").append(body);
							title+='<div  index="1" class="dan">'+res.data.shangping.name+'</div>';
							body = '';
							$.each(res.data.shangping.data,function(i,v){
								if(i==0){
									shangpingfenlei = v.id;
									body +='<div class="headdan  danactive" data-id="'+v.id+'">'+v.name+'</div>';
								}else{
									body +='<div class="headdan" data-id="'+v.id+'">'+v.name+'</div>';
								}
							})
							$("#myrigth").empty();
							$("#myrigth").append(body);
							$(".heads").empty();
							$(".heads").append(title);
							getshiping();
							getshangping();
						}else{
							mui.toast(res.msg);
						}
					})
					// 
					// 
					// 
					// 
					// //点击大的分类
		    		mui(".heads").on("tap", ".dan", function() {
		    			$(this).addClass("hedactive");
		    			$(this).siblings().removeClass("hedactive")
		    			var  value=$(this).attr("index");
						leixing = value;
		    			if(value==0){
		    				$(".left").css("display","block");
		    		$(".right").css("display","none")
		    			}else{
		    				$(".left").css("display","none");
		    				$(".right").css("display","block")
		    			}
		    		});
		   //  
		   //  //点击点击小的分类
		    		mui(".mainhead").on("tap", ".headdan", function() {
						var id = $(this).attr('data-id');
		    			$(this).addClass("danactive");
		    			$(this).siblings().removeClass("danactive");
						if(leixing==0){
							shipinpage =1;
							shipinfenlei = id;
							getData();
							
						}else if(leixing==1){
							shangpingpage = 1;
							shangpingfenlei = id;
							getData();
						}
		    		})
		   //  		
		   //  		//点击内容详情,点击第一个的详情
		    		mui("#left").on("tap", "li", function() {
						var id = $(this).attr('data-id');
						
		    				mui.openWindow({
		    				url:'./sub1/video.html',
		    				id:"./sub1/video.html",
		    				extras: {
		    				videoid:id,
		    				},
		    				show: {
		    					autoShow: true, //页面loaded事件发生后自动显示，默认为true
		    					aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
		    					duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		    				},
		    				waiting: {
		    					autoShow: true, //自动显示等待框，默认为true
		    					title: '正在加载...', //等待对话框上显示的提示内容
		    				}
		    			})
		    		})
		   //  			//点击内容详情,点击第二个的详情
		    		mui("#right").on("tap", "li", function() {
						var id = $(this).attr('data-id');
		    				mui.openWindow({
		    				url:'./sub2/xqhushangpin.html',
		    				id:"./sub2/xqhushangpin.html",
		    				extras: {
							shangpingid:id,
		    				src:'../video/shiyong.mp4',
		    				},
		    				show: {
		    					autoShow: true, //页面loaded事件发生后自动显示，默认为true
		    					aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
		    					duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		    				},
		    				waiting: {
		    					autoShow: true, //自动显示等待框，默认为true
		    					title: '正在加载...', //等待对话框上显示的提示内容
		    				}
		    			})
		    		})
		})
		
		
		
	</script>
</html>
